import React, {useRef, useState} from 'react';
import {Drawer, Modal} from 'antd';

import {createStyles, useTheme} from 'antd-style';
import type {DrawerClassNames, DrawerStyles} from 'antd/es/drawer/DrawerPanel';
import TextArea from "antd/es/input/TextArea";

const useStyle = createStyles(({token}) => ({
  'my-drawer-mask': {},
}));

const Item = ({item, handleDelete, setCommentId, userInfo}) => {

  const {confirm} = Modal

  const handlDelete = () => {
    confirm({
      content: '你确定要删除这条评论吗',
      onOk() {
        handleDelete(item.id)
      },
      onCancel() {},
      okText: '确定',
      cancelText: '取消',
      centered: true,
    });
  }

  return (
    <div className="reply-item">
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            alt=""
            src={item.avatar}
          />
        </div>
      </div>

      <div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{item.name}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{item.description}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">发布于{item.markTime}</span>
            {/* 评论数量 */}
            {/* 条件：user.id === item.user.id */}
            {(userInfo.id === item.userId) &&
              <span className="delete-btn" onClick={handlDelete}>删除</span>
            }
          </div>
        </div>
      </div>
    </div>
  )
}


const Comments = (props) => {

  const {onClose, open, commentList, content, setContent, handlePublish, handleDelete, userInfo} = props

  const {styles} = useStyle();

  const classNames: DrawerClassNames = {
    mask: styles['my-drawer-mask'],
  };

  const drawerStyles: DrawerStyles = {
    mask: {
      backgroundColor: 'rgba(0, 0, 0, 0.1)'
    },
  };

  // 发表评论
  const inputRef = useRef(null)

  return (
    <>
      <Drawer
        title="评论"
        placement="right"
        size="large"
        onClose={onClose}
        open={open}
        classNames={classNames}
        styles={drawerStyles}
      >
        <div className="app">
          {/* 导航 Tab */}
          <div className="reply-navigation">
            <ul className="nav-bar">
              <li className="nav-title">
                <span className="nav-title-text">评论</span>
                {/* 评论数量 */}
                <span className="total-reply">{commentList.length}</span>
              </li>
            </ul>
          </div>

          <div className="reply-wrap">
            {/* 发表评论 */}
            <div className="box-normal">
              {/* 当前用户头像 */}
              <div className="reply-box-avatar">
                <div className="bili-avatar">
                  <img className="bili-avatar-img" src={userInfo.avatar} alt="用户头像"/>
                </div>
              </div>
              <div className="reply-box-wrap">
                {/* 评论框 */}
                <TextArea
                  className="reply-box-textarea"
                  placeholder="发一条友善的评论"
                  ref={inputRef}
                  value={content}
                  maxLength={100}
                  showCount={true}
                  onChange={(e) => setContent(e.target.value)}
                />
                {/* 发布按钮 */}
                <div className="reply-box-send">
                  <div className="send-text" onClick={handlePublish}>发布</div>
                </div>
              </div>
            </div>
            {/* 评论列表 */}
            <div className="reply-list">
              {/* 评论项 */}
              {commentList.length <= 0 ? <p style={{textAlign: "center"}}>暂无评论</p> : commentList.map(item => <Item key={item.id} item={item} handleDelete={handleDelete} userInfo={userInfo} />)}
            </div>
          </div>
        </div>
      </Drawer>
    </>
  );
};

export default Comments
